<preview class="preview" show="{ url && visible }">
    <div class="toolbar">
        <a ref="btnNew"  class="new" href="{ url || '#' }" target="_blank" title="Open In New Window">N</a>
        <a ref="btnClose" href="#" class="close" title="Close" onclick="{ hideFrame }">X</a>
    </div>
    <iframe src="{ url }" if="{ url }"></iframe>

    <script>
        var self = this
        self.url = ''
        self.visible = false

        this.hideFrame = function(e){
            e.preventDefault()
            e.stopImmediatePropagation()

            self.visible = false
            self.update()
        }

        function showFrame(url){
            //if(/examples/.test(url)){
                //invalid caches
                var fullUrl = util.resolveUrl(url);
                //url = './liveeditor/?' + decodeURIComponent(fullUrl);
            //}

            self.url = fullUrl
            self.visible = true
            self.update()
        }

        function clickHandler(e){
            var el = e.srcElement
            if(el.tagName !== 'A'){
                return//only interested in 'A' tag
            }
            if(el == self.refs.btnNew || el == self.refs.btnClose){
                return //skip
            }
            e.preventDefault()
            
            var href = el.getAttribute('href')
            console.log('showing url:' + href)
            showFrame(href)
        }

        this.on('mount',function(){
            document.addEventListener('click', clickHandler)
        })

        this.on('unmount',function(){
            document.removeEventListener('click', clickHandler)
        })

        this.on('updated', function(){
            console.log('updated')
        })
    </script>
</preview>